<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>浏览学生</title>
    <base href="<%=basePath%>" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //在当前页面加载后，自动先查询一遍数据，并输出
            loadStudentData();
            //后期需要再次查询数据时，利用绑定点击事件
            $("#btnLoader").click(function () {
                loadStudentData();
            })
        })
        function loadStudentData() {
            $.ajax({
                url:"student/selectStudent.do",
                type:"get",
                dataType:"json",
                success:function (resp) {
                    // alert(resp);
                    //清除旧数据
                    $("#info").html("")
                    //遍历输出,新数据
                    $.each(resp,function (i,n) {
                        $("#info").append("<tr>")
                            .append("<td>"+n.id+"</td>")
                            .append("<td>"+n.name+"</td>")
                            .append("<td>"+n.age+"</td>")
                            .append("</tr>")
                    })
                }
            })
        }
    </script>
</head>
<body>
    <div align="center" id="">
        <table>
            <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
            </thead>
            <tbody id="info">

            </tbody>
        </table>
        <input type="button" id="btnLoader" value="查询数据"/>
    </div>
</body>
</html>
